<!-- 主页面_欢迎页面 -->
<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="100" class="internalRow">
      <el-col :span="6">
        <h2>Welcome</h2>
      </el-col>
    </el-row>
    <!-- 卡片视图区域 -->
    <el-row :gutter="50">
      <!-- 今日成交额 -->
      <el-col :span="6">
        <el-card>
          <el-row :gutter="10" class="internalRow">
            <el-col :span="12">
              <i class="el-icon-coin" style="color:RGB(70,200,200)"></i>
            </el-col>
            <el-col :span="12">今日的成交额<p>0</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <!-- 昨日成交额 -->
      <el-col :span="6">
        <el-card>
          <el-row :gutter="10" class="internalRow">
            <el-col :span="12">
              <i class="el-icon-price-tag" style="color:RGB(54,160,250)"></i>
            </el-col>
            <el-col :span="12">昨日成交额<p>0</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <!-- 上周成交额 -->
      <el-col :span="6">
        <el-card>
          <el-row :gutter="10" class="internalRow">
            <el-col :span="12">
              <i class="el-icon-data-analysis" style="color:RGB(250,80,111)"></i>
            </el-col>
            <el-col :span="12">上周成交额<p>203</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <!-- 本月成交额 -->
      <el-col :span="6">
        <el-card>
          <el-row :gutter="10" class="internalRow">
            <el-col :span="12">
              <i class="el-icon-data-analysis" style="color:RGB(70,200,200)"></i>
            </el-col>
            <el-col :span="12">本月成交额<p>205</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row :gutter="50">
      <!-- 今日订单数 -->
      <el-col :span="6">
        <el-card>
          <el-row :gutter="10" class="internalRow">
            <el-col :span="12">
              <i class="el-icon-mobile" style="color:RGB(70,200,200)"></i>
            </el-col>
            <el-col :span="12">今日订单数<p>0</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <!-- 昨日订单数 -->
      <el-col :span="6">
        <el-card>
          <el-row :gutter="10" class="internalRow">
            <el-col :span="12">
              <i class="el-icon-mobile" style="color:RGB(54,160,250)"></i>
            </el-col>
            <el-col :span="12">昨日订单数<p>0</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <!-- 上周订单数 -->
      <el-col :span="6">
        <el-card>
          <el-row :gutter="10" class="internalRow">
            <el-col :span="12">
              <i class="el-icon-mobile" style="color:RGB(250,80,111)"></i>
            </el-col>
            <el-col :span="12">上周订单数<p>15</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <!-- 本月订单数 -->
      <el-col :span="6">
        <el-card>
          <el-row :gutter="10" class="internalRow">
            <el-col :span="12">
              <i class="el-icon-mobile" style="color:RGB(70,200,200)"></i>
            </el-col>
            <el-col :span="12">本月订单数<p>25</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: {
          version: "v9",
          appid: "15355227",
          appsecret: "t6ts2bwy",
          city: "武汉",
        },
      };
    },

    components: {},

    computed: {},

    methods: {}
  }

</script>
<style lang='less' scoped>
  .el-row {
    margin-top: 50px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  i {
    font-size: 50px;
    line-height: 80px;
    margin-left: 15px;
  }

  .el-card {
    height: 120px;
  }

  .internalRow {
    margin-top: 0;
  }

  p {
    font-weight: bold;
  }
</style>